<!DOCTYPE html>
<html class="no-js" lang="sv">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes" />
	<title>flyPanels - responsive off canvas panels</title>


	<link rel="stylesheet" href="css/flyPanels.css">
	<link rel="stylesheet" href="css/demo.css">
</head>

<body>
	<div class="flypanels-container preload">
		<div class="offcanvas flypanels-left">
			<div class="panelcontent" data-panel="treemenu">
				<nav class="flypanels-treemenu" role="navigation">
					<ul>
						<li class="haschildren"><div><a href="#" class="link">Example menu item Example menu item Example menu item</a> <a href="#" class="expand">2<i class="fa icon"></i></a></div>
							<ul>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
							</ul>
						</li>
						<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">5<i class="fa icon"></i></a></div>
							<ul>
								<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">6<i class="fa icon"></i></a></div>
									<ul>
										<li class="active"><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
									</ul>
								</li>
								<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">11<i class="fa icon"></i></a></div>
									<ul>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">8<i class="fa icon"></i></a></div>
											<ul>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
											</ul>
										</li>
										<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">11<i class="fa icon"></i></a></div>
											<ul>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
												<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">11<i class="fa icon"></i></a></div>
													<ul>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
													</ul>
												</li>
												<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">11<i class="fa icon"></i></a></div>
													<ul>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
														<li><div><a href="#" class="link">Example menu item</a></div></li>
													</ul>
												</li>
												<li><div><a href="#" class="link">Example menu item</a></div></li>
											</ul>
										</li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
									</ul>
								</li>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
								<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">5<i class="fa icon"></i></a></div>
								<ul>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
										<li><div><a href="#" class="link">Example menu item</a></div></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">1<i class="fa icon"></i></a></div>
							<ul>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
							</ul>
						</li>
						<li><div><a href="#" class="link">Example menu item</a></div></li>
						<li><div><a href="#" class="link">Example menu item</a></div></li>
						<li class="haschildren"><div class="link"><a href="#" class="link">Example menu item</a> <a href="#" class="expand">4<i class="fa icon"></i></a></div>
							<ul>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
								<li><div><a href="#" class="link">Example menu item</a></div></li>
							</ul>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="flypanels-main">
			<div class="flypanels-topbar">
				<a class="flypanels-button-left icon-menu icon-hamburger" data-panel="treemenu" href="#">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</a>
				<a class="flypanels-button-right icon-menu icon-magnify" data-panel="search" href="#">
					<i class="fa fa-search"></i>
				</a>
			</div>
			<div class="flypanels-content">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-md-6 col-md-offset-3">
							<img src="img/logo.png" class="img-responsive logo" alt="flyPanels Logo">
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12 col-md-8 col-md-offset-2">
							<div class="version">v 2.0.3</div>
							<div class="github">
								<a class="github-button" href="https://github.com/SubZane/flyPanels" data-style="mega" data-count-href="/SubZane/flyPanels/stargazers" data-count-api="/repos/SubZane/flyPanels#stargazers_count">Star</a>
								<a class="github-button" href="https://github.com/SubZane/flyPanels" data-style="mega" data-count-href="/SubZane/flyPanels/network" data-count-api="/repos/SubZane/flyPanels#forks_count">Fork</a>
							</div>
							<h1>flyPanels - an off canvas menu panel system for responsive websites</h1>
							<p>FlyPanels is a responsive off canvas panel plugin for websites or web apps. It supports all modern browsers and IE from version 11. It can be used for menus, contact forms or anything you like really. Since version 2.0 this plugin is written in pure vanilla javascript and has no dependencies.</p>
							<p>Compared to many other off canvas menu plugins out there this one is more solid and behaves more like a native solution. <strong>Try it!</strong></p>
							<div class="download">
								<a class="btn btn-primary" href="https://github.com/SubZane/flyPanels">View on Github</a>
								<p class="small">(Download the source and read the documentation)</p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12 col-md-8 col-md-offset-2">
							<div class="codepanel">
									<div class="bower">
										bower install flypanels --save
									</div>
							</div>
						</div>
					</div>
				</div>

				<footer>
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-md-8 col-md-offset-2">
								<h3>View my other projects</h3>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12 col-md-8 col-md-offset-2">

								<div class="row project">
									<div class="col-xs-12 col-md-5">
										<a href="http://www.andreasnorman.com/simplegmaps"><img src="img/simplegmaps.png" class="img-responsive"></a>
									</div>
									<div class="col-xs-12 col-md-7">
										<h4><a href="http://www.andreasnorman.com/simplegmaps">SimpleGMaps</a></h4>
										<p>SimpleGMaps is a jQuery plugin for easier handling google maps on your webiste. Simply add the needed HTML-markup and SimpleGMaps will take care of the rest, no scripting necessary!</p>
										<div class="github">
											<a class="github-button" href="https://github.com/SubZane/simplegmaps" data-style="mega" data-count-href="/SubZane/simplegmaps/stargazers" data-count-api="/repos/SubZane/simplegmaps#stargazers_count">Star</a>
											<a class="github-button" href="https://github.com/SubZane/simplegmaps" data-style="mega" data-count-href="/SubZane/simplegmaps/network" data-count-api="/repos/SubZane/simplegmaps#forks_count">Fork</a>
										</div>

									</div>
								</div>

								<div class="row project">
									<div class="col-xs-12 col-md-5">
										<a href="http://www.andreasnorman.com/socialjs"><img src="img/socialjs.png" class="img-responsive"></a>
									</div>
									<div class="col-xs-12 col-md-7">
										<h4><a href="http://www.andreasnorman.com/socialjs">SocialJS</a></h4>
										<p>SocialJS is a jQuery plugin for creating your own custom social media share buttons. You can design them anyway you want, just add the needed markup and SocialJS will handle the rest, no need to write any javascript.</p>
										<div class="github">
											<a class="github-button" href="https://github.com/SubZane/socialjs" data-style="mega" data-count-href="/SubZane/socialjs/stargazers" data-count-api="/repos/SubZane/socialjs#stargazers_count">Star</a>
											<a class="github-button" href="https://github.com/SubZane/socialjs" data-style="mega" data-count-href="/SubZane/socialjs/network" data-count-api="/repos/SubZane/socialjs#forks_count">Fork</a>
										</div>
									</div>
								</div>

								<div class="row project">
									<div class="col-xs-12 col-md-5">
										<a href="http://www.andreasnorman.com/flypanels"><img src="img/flypanels.png" class="img-responsive"></a>
									</div>
									<div class="col-xs-12 col-md-7">
										<h4><a href="http://www.andreasnorman.com/flypanels">flyPanels</a></h4>
										<p>FlyPanels is a off canvas mobile panel system for responsive websites. It comes complete with a menu component supporting 5  sub menu levels and a search component listing the search result from a JSON response.</p>
										<div class="github">
											<a class="github-button" href="https://github.com/SubZane/flypanels" data-style="mega" data-count-href="/SubZane/flypanels/stargazers" data-count-api="/repos/SubZane/flypanels#stargazers_count">Star</a>
											<a class="github-button" href="https://github.com/SubZane/flypanels" data-style="mega" data-count-href="/SubZane/flypanels/network" data-count-api="/repos/SubZane/flypanels#forks_count">Fork</a>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</footer>

			</div>
		</div>
		<div class="offcanvas flypanels-right">
			<div class="panelcontent" data-panel="search">
				<div class="searchbox" data-searchurl="json/searchresult.json?search=true">
					<input title="search" type="text" />
					<a href="#" aria-label="search" class="searchbutton"></a>
				</div>
				<div class="resultinfo" style="display:none">
					You search for "<span class="query">lorem ipsum</span>" resulted in <span class="num">5</span> hits.
				</div>
				<div class="errormsg" style="display:none">
					Something went wrong, please refresh the page and try again.
				</div>

				<div class="loading" style="display:none"><div class="loader"></div><span>Searching...</span></div>
				<div class="flypanels-searchresult" style="display:none"></div>
			</div>


			<div class="panelcontent" data-panel="iconmenu">
				<nav class="flypanels-iconmenu">
					<ul>
						<li><a class="fa fa-github-square" href="https://github.com/SubZane/flyPanels">Github repository</a></li>
						<li><a class="fa fa-exclamation-circle" href="https://github.com/SubZane/flyPanels/issues">Issues</a></li>
						<li><a class="fa fa-download" href="https://github.com/SubZane/flyPanels/archive/master.zip">Download master</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script src="js/fastclick.min.js"></script>
	<script src="js/flypanels.js"></script>
	<script>
	document.addEventListener("DOMContentLoaded", function(event) {
		FastClick.attach(document.body);
		flyPanels.init({
				treeMenu: {
					init: true
				},
				search: {
					init: true,
					saveQueryCookie: true
				}
		})
  });
	</script>


</body>
</html>
